<template>
	<view style="height: 95vh;">
		<order-info :order="order"></order-info>
		<view class="searchBox">
			<view style="display: flex;">
				<text class="city">用户搜索</text>
			</view>

			<view class="search">
				<u--input :value="nickName" clearable border="none" fontSize="12" placeholder="输入用户名称查询"
					@blur="isSearch = false" @focus="isSearch = true" @change="searchChange" />
			</view>
		</view>
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<u-radio-group v-model="checkedUserId">
					<view class="item" v-for="(item, index) in staffList" :key="item.userId">
						<view @click="checkedUser(item.userId,item.nickName)">
							<view style="display: inline-block;width: 10%;position: relative;top: -28px;">
								<u-radio active-color="#00bfbf" :name="item.userId"> </u-radio>
							</view>
							<view style="display: inline-block;width: 90%;">
								<view class="text-line">
									<view class="flex-item">
										<text class="text-name">用户姓名:</text>
										<text class="text-value">{{item.nickName|filterNull}}</text>
									</view>
									<view class="flex-item">
										<text class="text-name">联系电话:</text>
										<text class="text-value">{{item.phone|filterNull}}</text>
									</view>
								</view>
								<view class="text-line">
									<view class="flex-item">
										<text class="text-name">所属部门:</text>
										<text class="text-value">{{item.deptName|filterNull}}</text>
									</view>
									<view class="flex-item">
										<text class="text-name">用户角色:</text>
										<text class="text-value">{{item.roleName|filterNull}}</text>
									</view>
								</view>
								<view class="text-line">
									<text class="text-name" style="color: #17c5c5 !important;">当前订单数:</text>
									<text class="text-value"
										style="color: #17c5c5 !important;">{{item.orderNumber}}</text>
								</view>
							</view>
						</view>
					</view>
				</u-radio-group>
			</mescroll-body>
		<button type="info" class="sub-btn" @click="distribution">确定分配</button>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import * as api from '@/api/order-api.js';
	import orderInfo from './component/orderInfo.vue';
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				order: {},
				nickName: '',
				isSearch: false,
				staffList: [],
				checkedUserId: '',
				checkedUserName: ''
			}
		},
		onLoad: function(option) {
			const item = JSON.parse(decodeURIComponent(option.item));
			this.order = item
		},
		methods: {
			upCallback(page) {
				var param = {
					nickName: this.nickName,
					pageNum: page.num,
					pageSize: page.size,
				}
				api.geUserlist(this.toParams(param)).then(res => {
					//设置列表数据
					if (page.num == 1) this.staffList = []; //如果是第一页需手动制空列表
					this.staffList = this.staffList.concat(res.rows); //追加新数据
					this.mescroll.endBySize(res.rows.length, res.total);
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
				this.mescroll.endSuccess();
			},
			//搜索
			searchChange(value) {
				this.nickName = value;
				this.mescroll.triggerDownScroll();
			},
			checkedUser(userId,nickName) {
				this.checkedUserId = userId;
				this.checkedUserName = nickName;
			},
			distribution() {
				api.distribution({
					orderNo: this.order.orderNo,
					userId: this.checkedUserId
				}).then(res => {
					this.$u.toast('分配成功')
					uni.$emit("refreshOrder");
					uni.navigateBack({
						animationDuration:300
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.searchBox {
		padding: 20upx;
		display: flex;
		align-items: center;
		background-color: #fff;

		.city {
			font-size: 30upx;
			font-weight: bold;
			color: #333;
		}

		.search {
			flex: 1;
			padding: 0 20upx;
			margin: 0 20upx;
			height: 60upx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 24upx;
			background-color: #ededed;
			border-radius: 8upx;
		}
	}

	.item {
		display: flex;
		flex-direction: column;
		background-color: white;
		border-radius: 8rpx;
		margin: 10rpx 20rpx;
		padding: 20rpx;
	}

	.title {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #333;
		margin-left: 20rpx;
	}

	.text-warn {
		font-size: 24rpx;
		color: red;
		margin-right: 20rpx;
	}

	.text-warn-orange {
		color: yellow;
	}

	.flex-item {
		flex: 1
	}

	.btn-detail {
		width: 180rpx;
		height: 60rpx;
		border-radius: 50rpx;
		color: white;
		text-align: center;
		background-color: $uni-color-primary;
		font-size: 26rpx;
		line-height: 60rpx;
		margin: 10rpx 20rpx 10rpx;
		align-self: flex-end;
	}

	.end-time {
		color: #f59a23;

		.type-tag {
			background-color: #f59a23;
			color: white;
			padding: 5rpx;
			font-size: 18rpx;
			margin-right: 10rpx;
		}
	}

	.start-time {
		color: #e65a6b;

		.type-tag {
			background-color: #e65a6b;
			color: white;
			padding: 5rpx;
			font-size: 18rpx;
			margin-right: 10rpx;
		}
	}

	

	/deep/ .u-radio-group--row {
		display: inline !important;
	}

	/deep/ .u-radio {
		flex-direction: row-reverse !important;
	}
</style>
